<template>
  <div>
    <el-card class="mt20">
      <el-form :inline="true" :model="searchInfo" ref="searchForm">
        <el-form-item label="所属城市:" prop="name">
          <el-input v-model.trim="searchInfo.name" clearable @keyup.enter.native="enterNextInput('enterpriseName')" ref="input-name"></el-input>
        </el-form-item>
        <el-form-item label="所属分公司:" prop="agentId">
          <el-select v-model="searchInfo.agentId" clearable placeholder="全部" @focus="getBranchList">
            <el-option :label="agents.userName" :value="agents.id" v-for="(agents, index) in branchList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业名称:" prop="enterpriseName">
          <el-input v-model.trim="searchInfo.enterpriseName" clearable @keyup.enter.native="enterNextInput('salesmanName')" ref="input-enterpriseName"></el-input>
        </el-form-item>
        <el-form-item label="业务员名称:" prop="salesmanName">
          <el-input v-model.trim="searchInfo.salesmanName" @keyup.enter.native="onSearch" ref="input-salesmanName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch()">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header" class="clearfix">
        <span>数据列表</span>
        <div>
          <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
        </div>
      </div>
      <jxf-table class="" :table="dataTable">
        <template slot="userType" slot-scope="merchant">
          <div v-if="merchant.row.userType =='2'">分公司</div>
          <div v-if="merchant.row.userType =='3'">供应商</div>
          <div v-if="merchant.row.userType =='4'">采购商</div>
          <div v-if="merchant.row.userType =='6'">业务员</div>
          <div v-if="merchant.row.userType =='7'">渠道商</div>
        </template>
      </jxf-table>
    </el-card>
    <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                    @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
  </div>
</template>

<script>
  export default {
    name: "MerchartBusinessService",
    data() {
      return {
        searchInfo: {
          salesmanName: "",
          name: "",
          agentId: "",
          enterpriseName: ""
        },
        branchList: [],
        isSuccess: false,
        dataTable: {
          border:true,
          loading:false,
          hasSelect:false,
          hasOperation:false,
          tr: [
            {
              id: '1',
              label: '城市',
              prop: 'name'
            },
            {
              id: '2',
              minWidth: '200',
              label: '企业名称（商户名称）',
              prop: 'enterpriseName'
            },
            {
              id: '3',
              label: '所属角色',
              prop: 'userType',
              show: 'template',
            },
            {
              id: '4',
              minWidth: '100',
              label: '所属分公司',
              prop: 'agentName'
            },
            {
              id: '5',
              minWidth: '100',
              label: '所属渠道商',
              prop: 'channelDealerName'
            },
            {
              id: '6',
              minWidth: '100',
              label: '对接业务员',
              prop: 'salesmanName'
            }
          ],
          operation: [],
          data: []
        },
        pageTotal:40,
        pageSize:10,
        currentPage:1
      }
    },
    methods: {
      // 导出
      exportExcel() {
        this.isSuccess = true;
        let data = {
          ...this.searchInfo
        };
        ajax.export(apis.user.exportMerchantExcel, data).then((res) => {
          this.isSuccess = false;
          if(res.code) {
            if(res.code === "10000000") {

            } else {
              this.$message.error(res.message)
            }
          }
        })
      },

      getData(info) {
        this.dataTable.loading = true;
        let data = {
          ...this.searchInfo,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        ajax.post(apis.user.getMerchantRelationShipList, data).then(result => {
          if(result.code === '10000000') {
            this.dataTable.data = result.data.dataList;
            this.pageTotal = result.data.total
          } else {
            this.$message.error(result.message)
          }
          this.dataTable.loading = false
        })
      },

      // 获取分公司
      getBranchList() {
        let data = {
          userType: '2'
        };
        ajax.post(apis.user.getBranchList, data).then(res => {
          if(res.code === '10000000') {
            this.branchList = res.data.dataList;
          } else {
            this.$message.error(res.message)
          }
        })
      },

      enterNextInput(inputName) {
        this.$refs["input-" + inputName].focus();
      },

      onSearch() {
        this.currentPage = 1;
        this.getData()
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo;
        this.getData();
      },

      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo;
        this.getData();
      },
    },
    created() {
      this.onSearch()
    }
  }
</script>

<style lang="scss" scoped>

</style>
